<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宋凯文20岁生日快乐！</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF5E7D',
                        secondary: '#5E8AFF',
                        accent: '#FFD35E',
                        dark: '#2D3748',
                        light: '#FEFAFA'
                    },
                    fontFamily: {
                        birthday: ['"Comic Sans MS"', '"Marker Felt"', 'Arial', 'sans-serif'],
                        greeting: ['"Montserrat"', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            }
            .text-shadow-lg {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            .animate-float-delay {
                animation: float 3s ease-in-out 0.5s infinite;
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .animate-spin-slow {
                animation: spin 10s linear infinite;
            }
            .bg-pattern {
                background-image: radial-gradient(#FF5E7D33 2px, transparent 2px);
                background-size: 30px 30px;
            }
            .animate-fade-in {
                animation: fadeIn 1s ease-out forwards;
            }
            .animate-slide-up {
                animation: slideUp 0.8s ease-out forwards;
            }
            .animate-scale {
                animation: scale 0.5s ease-out forwards;
            }
            .photo-frame {
                position: relative;
                transition: all 0.4s ease;
            }
            .photo-frame::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border: 4px solid transparent;
                transition: all 0.3s ease;
                border-radius: 4px;
            }
            .photo-frame:hover::after {
                border-color: #FF5E7D;
                transform: translate(-4px, -4px);
                box-shadow: 6px 6px 0 rgba(0,0,0,0.1);
            }
            .countdown-item {
                position: relative;
                overflow: hidden;
                height: 60px;
            }
            .countdown-number {
                transition: transform 0.5s ease;
            }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-12px); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translateY(20px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes scale {
            0% { transform: scale(0.9); opacity: 0; }
            70% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }

        .gift-box {
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        .gift-box:hover {
            transform: scale(1.05) rotate(3deg);
        }
        
        .gift-box.selected {
            border-color: #FF5E7D;
            box-shadow: 0 12px 25px -5px rgba(255, 94, 125, 0.4);
            transform: translateY(-5px);
        }
        
        .firework {
            position: absolute;
            border-radius: 50%;
            animation: explode 1s ease-out forwards;
        }
        
        .firework-small {
            width: 3px;
            height: 3px;
        }
        
        .firework-medium {
            width: 5px;
            height: 5px;
        }
        
        .firework-large {
            width: 7px;
            height: 7px;
        }
        
        @keyframes explode {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(var(--scale, 15));
                opacity: 0;
            }
        }
        
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            animation: fall 5s linear forwards;
        }
        
        @keyframes fall {
            0% {
                transform: translateY(-10px) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }
        
        .blessing-item {
            opacity: 0;
            transform: translateY(10px);
        }

        /* 页面过渡动画 */
        .page-transition {
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
    </style>
</head>
<body class="bg-light min-h-screen font-birthday text-dark overflow-x-hidden">
    <!-- 背景装饰元素 -->
    <div class="fixed inset-0 -z-10 bg-pattern opacity-30"></div>
    <div class="fixed top-10 left-10 text-primary text-6xl animate-spin-slow opacity-20">🎂</div>
    <div class="fixed top-20 right-20 text-secondary text-5xl animate-float opacity-20">🎉</div>
    <div class="fixed bottom-40 left-20 text-accent text-7xl animate-pulse-slow opacity-20">🎁</div>
    <div class="fixed bottom-20 right-10 text-primary text-6xl animate-float-delay opacity-20">🎈</div>

    <!-- 登录页面 -->
    <section id="login-page" class="min-h-screen flex flex-col items-center justify-center p-4 page-transition">
        <div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 transform transition-all duration-500 hover:shadow-2xl animate-scale">
            <div class="text-center mb-6">
                <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-primary text-shadow-lg mb-2">生日快乐！</h1>
                <p class="text-gray-600 text-lg">请输入信息进入生日派对</p>
            </div>

            <!-- 生日倒计时 -->
            <div class="bg-gray-50 rounded-xl p-4 mb-8 text-center">
                <p class="text-gray-600 mb-2">距离宋凯文20岁生日还有</p>
                <div class="flex justify-center gap-3">
                    <div class="countdown-item bg-white rounded-lg shadow p-2 w-16">
                        <div id="days" class="countdown-number text-2xl font-bold text-primary">00</div>
                        <div class="text-xs text-gray-500">天</div>
                    </div>
                    <div class="countdown-item bg-white rounded-lg shadow p-2 w-16">
                        <div id="hours" class="countdown-number text-2xl font-bold text-primary">00</div>
                        <div class="text-xs text-gray-500">时</div>
                    </div>
                    <div class="countdown-item bg-white rounded-lg shadow p-2 w-16">
                        <div id="minutes" class="countdown-number text-2xl font-bold text-primary">00</div>
                        <div class="text-xs text-gray-500">分</div>
                    </div>
                    <div class="countdown-item bg-white rounded-lg shadow p-2 w-16">
                        <div id="seconds" class="countdown-number text-2xl font-bold text-primary">00</div>
                        <div class="text-xs text-gray-500">秒</div>
                    </div>
                </div>
            </div>
            
            <form id="login-form" class="space-y-6">
                <div>
                    <label for="name" class="block text-gray-700 mb-2 text-lg">姓名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="name" name="name" required
                            class="w-full pl-10 pr-4 py-3 rounded-lg border-2 border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all outline-none"
                            placeholder="请输入您的姓名">
                    </div>
                </div>
                
                <div>
                    <label for="password" class="block text-gray-700 mb-2 text-lg">密码 (生日日期)</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="password" name="password" required
                            class="w-full pl-10 pr-4 py-3 rounded-lg border-2 border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all outline-none"
                            placeholder="请输入密码（格式：YYYYMMDD）">
                    </div>
                </div>
                
                <button type="submit" 
                    class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
                    <span>进入派对</span>
                    <i class="fa fa-arrow-right"></i>
                </button>
            </form>
            
            <div class="mt-6 text-center text-gray-500 text-sm">
                <p>提示：密码是生日日期，格式为8位数字</p>
            </div>
        </div>
        
        <div class="mt-8 text-center">
            <p class="text-gray-600 animate-pulse">准备好迎接惊喜了吗？</p>
        </div>
    </section>

    <!-- 照片墙与礼物选择页面 -->
    <section id="gift-page" class="min-h-screen flex flex-col items-center justify-start pt-16 p-4 hidden page-transition">
        <div class="text-center mb-10">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-primary text-shadow mb-4">选择你的生日礼物！</h2>
            <p class="text-gray-600 text-lg max-w-2xl mx-auto">宋凯文，祝你20岁生日快乐！选择一份你喜欢的礼物吧~</p>
        </div>

        <!-- 照片墙 -->
        <div class="max-w-5xl w-full mx-auto mb-16">
            <h3 class="text-xl font-bold text-secondary mb-6 text-center">美好回忆</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="photo-frame overflow-hidden rounded-lg shadow-md">
                    <img src="https://picsum.photos/seed/memory1/300/300" alt="与宋凯文的美好回忆照片1" class="w-full h-40 object-cover transition-transform duration-500 hover:scale-110">
                </div>
                <div class="photo-frame overflow-hidden rounded-lg shadow-md">
                    <img src="https://picsum.photos/seed/memory2/300/300" alt="与宋凯文的美好回忆照片2" class="w-full h-40 object-cover transition-transform duration-500 hover:scale-110">
                </div>
                <div class="photo-frame overflow-hidden rounded-lg shadow-md">
                    <img src="https://picsum.photos/seed/memory3/300/300" alt="与宋凯文的美好回忆照片3" class="w-full h-40 object-cover transition-transform duration-500 hover:scale-110">
                </div>
                <div class="photo-frame overflow-hidden rounded-lg shadow-md">
                    <img src="https://picsum.photos/seed/memory4/300/300" alt="与宋凯文的美好回忆照片4" class="w-full h-40 object-cover transition-transform duration-500 hover:scale-110">
                </div>
            </div>
        </div>
        
        <div class="max-w-4xl w-full mx-auto">
            <div class="grid md:grid-cols-2 gap-8">
                <!-- 惊喜礼物 -->
                <div class="gift-box bg-white rounded-xl shadow-lg p-6 border-2 border-transparent cursor-pointer" data-gift="surprise">
                    <div class="text-center mb-4">
                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-secondary/20 text-secondary text-3xl mb-4">
                            <i class="fa fa-gift"></i>
                        </div>
                        <h3 class="text-xl font-bold text-secondary">惊喜礼物</h3>
                    </div>
                    <p class="text-gray-600 text-center">一份神秘大礼，充满惊喜！<br>将在下次见面时亲手交给你</p>
                    <div class="mt-6 text-center">
                        <span class="inline-block px-4 py-2 bg-secondary/10 text-secondary rounded-full text-sm font-medium">
                            充满期待
                        </span>
                    </div>
                </div>
                
                <!-- 自选礼物选项1 -->
                <div class="gift-box bg-white rounded-xl shadow-lg p-6 border-2 border-transparent cursor-pointer" data-gift="game">
                    <div class="text-center mb-4">
                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-accent/20 text-accent text-3xl mb-4">
                            <i class="fa fa-gamepad"></i>
                        </div>
                        <h3 class="text-xl font-bold text-accent">最新游戏一份</h3>
                    </div>
                    <p class="text-gray-600 text-center">选择一款你心仪已久的最新游戏，祝你玩得开心！</p>
                    <div class="mt-6 text-center">
                        <span class="inline-block px-4 py-2 bg-accent/10 text-accent rounded-full text-sm font-medium">
                            游戏爱好者首选
                        </span>
                    </div>
                </div>
                
                <!-- 自选礼物选项2 -->
                <div class="gift-box bg-white rounded-xl shadow-lg p-6 border-2 border-transparent cursor-pointer" data-gift="dinner">
                    <div class="text-center mb-4">
                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/20 text-primary text-3xl mb-4">
                            <i class="fa fa-cutlery"></i>
                        </div>
                        <h3 class="text-xl font-bold text-primary">大餐一顿</h3>
                    </div>
                    <p class="text-gray-600 text-center">选择一家你喜欢的餐厅，享受美味大餐，我请客！</p>
                    <div class="mt-6 text-center">
                        <span class="inline-block px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium">
                            美食爱好者首选
                        </span>
                    </div>
                </div>
                
                <!-- 自选礼物选项3 -->
                <div class="gift-box bg-white rounded-xl shadow-lg p-6 border-2 border-transparent cursor-pointer" data-gift="tech">
                    <div class="text-center mb-4">
                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-secondary/20 text-secondary text-3xl mb-4">
                            <i class="fa fa-headphones"></i>
                        </div>
                        <h3 class="text-xl font-bold text-secondary">数码配件</h3>
                    </div>
                    <p class="text-gray-600 text-center">挑选一款实用的数码配件，如无线耳机、智能手表等</p>
                    <div class="mt-6 text-center">
                        <span class="inline-block px-4 py-2 bg-secondary/10 text-secondary rounded-full text-sm font-medium">
                            实用之选
                        </span>
                    </div>
                </div>
            </div>
            
            <div class="mt-12 text-center">
                <button id="confirm-gift" 
                    class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-10 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-xl opacity-50 cursor-not-allowed"
                    disabled>
                    确认选择 <i class="fa fa-check ml-2"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- 贺卡页面 -->
    <section id="card-page" class="min-h-screen flex flex-col items-center justify-center p-4 hidden page-transition">
        <div class="relative max-w-3xl w-full mx-auto">
            <!-- 贺卡容器 -->
            <div class="bg-white rounded-3xl shadow-2xl overflow-hidden transform transition-all duration-700 hover:rotate-1 hover:scale-[1.01] animate-scale">
                <!-- 贺卡顶部 -->
                <div class="bg-gradient-to-r from-primary to-secondary p-8 text-center text-white">
                    <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-shadow-lg mb-2 animate-fade-in">生日快乐，宋凯文！</h2>
                    <p class="text-lg opacity-90 animate-fade-in" style="animation-delay: 0.3s;">2005年9月11日 - 2025年9月11日</p>
                    <div class="mt-4 flex justify-center gap-2">
                        <span class="inline-block text-2xl animate-float">🎂</span>
                        <span class="inline-block text-2xl animate-float" style="animation-delay: 0.2s;">🎉</span>
                        <span class="inline-block text-2xl animate-float" style="animation-delay: 0.4s;">🎈</span>
                        <span class="inline-block text-2xl animate-float" style="animation-delay: 0.6s;">🎁</span>
                        <span class="inline-block text-2xl animate-float" style="animation-delay: 0.8s;">🎊</span>
                    </div>
                </div>
                
                <!-- 贺卡内容 -->
                <div class="p-8">
                    <div class="text-center mb-8">
                        <p class="text-gray-700 text-lg leading-relaxed blessing-item" style="animation: slideUp 0.8s ease-out forwards 0.5s;">
                            亲爱的宋凯文：
                        </p>
                        <p class="text-gray-700 text-lg leading-relaxed mt-4 blessing-item" style="animation: slideUp 0.8s ease-out forwards 0.8s;">
                            今天是你20岁的生日，一个意义非凡的里程碑！20岁是青春的绽放，是梦想的启航，
                            愿你带着这十年积累的智慧与勇气，继续探索更广阔的世界。
                        </p>
                        <p class="text-gray-700 text-lg leading-relaxed mt-4 blessing-item" style="animation: slideUp 0.8s ease-out forwards 1.1s;">
                            愿你新的一岁里：
                        </p>
                        <ul class="text-gray-700 text-lg leading-relaxed mt-2 list-disc list-inside blessing-item" style="animation: slideUp 0.8s ease-out forwards 1.4s;">
                            <li>勇往直前，实现心中的梦想</li>
                            <li>收获成长，成为更好的自己</li>
                            <li>珍惜友谊，身边总有温暖相伴</li>
                            <li>保持热爱，生活永远充满色彩</li>
                        </ul>
                        <p class="text-gray-700 text-lg leading-relaxed mt-4 blessing-item" style="animation: slideUp 0.8s ease-out forwards 1.7s;">
                            感谢这些年的陪伴，见证了彼此的成长。期待未来的日子里，我们能一起创造更多精彩回忆！
                        </p>
                    </div>
                    
                    <div class="bg-gray-50 rounded-2xl p-6 mb-8 blessing-item" style="animation: slideUp 0.8s ease-out forwards 2s;">
                        <h3 class="text-xl font-bold text-primary mb-4 text-center">你的礼物选择</h3>
                        <div id="selected-gift-display" class="text-center text-gray-700 text-lg p-4 bg-white rounded-xl shadow">
                            <!-- 这里将显示选择的礼物 -->
                        </div>
                    </div>
                    
                    <div class="text-center blessing-item" style="animation: slideUp 0.8s ease-out forwards 2.3s;">
                        <p class="text-gray-600 italic">再次祝你20岁生日快乐！永远爱你的朋友</p>
                    </div>
                </div>
            </div>
            
            <!-- 装饰元素 -->
            <div class="absolute -top-6 -left-6 text-4xl animate-float">🎁</div>
            <div class="absolute -bottom-4 -right-4 text-4xl animate-float-delay">🎉</div>
        </div>
        
        <div class="mt-10 text-center">
            <button id="restart-btn" 
                class="bg-secondary hover:bg-secondary/90 text-white font-bold py-3 px-8 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-xl">
                点击有彩蛋 <i class="fa fa-refresh ml-2"></i>
            </button>
        </div>
    </section>

    <script>
        // 全局变量
        let selectedGift = null;
        let fireworksInterval;
        const birthdayDate = new Date(2025, 8, 11, 0, 0, 0); // 2025年9月11日
        
        // DOM 元素
        const loginPage = document.getElementById('login-page');
        const giftPage = document.getElementById('gift-page');
        const cardPage = document.getElementById('card-page');
        const loginForm = document.getElementById('login-form');
        const confirmGiftBtn = document.getElementById('confirm-gift');
        const restartBtn = document.getElementById('restart-btn');
        const selectedGiftDisplay = document.getElementById('selected-gift-display');
        const giftBoxes = document.querySelectorAll('.gift-box');
        
        // 初始化倒计时
        function initCountdown() {
            updateCountdown();
            setInterval(updateCountdown, 1000);
        }
        
        // 更新倒计时
        function updateCountdown() {
            const now = new Date();
            const diff = birthdayDate - now;
            
            // 如果生日已过，显示0
            if (diff <= 0) {
                document.getElementById('days').textContent = '00';
                document.getElementById('hours').textContent = '00';
                document.getElementById('minutes').textContent = '00';
                document.getElementById('seconds').textContent = '00';
                return;
            }
            
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            
            // 添加数字变化动画
            animateNumberChange('days', days);
            animateNumberChange('hours', hours);
            animateNumberChange('minutes', minutes);
            animateNumberChange('seconds', seconds);
        }
        
        // 数字变化动画
        function animateNumberChange(elementId, value) {
            const element = document.getElementById(elementId);
            const currentValue = parseInt(element.textContent);
            
            if (currentValue !== value) {
                element.style.transform = 'translateY(-100%)';
                
                setTimeout(() => {
                    element.textContent = value.toString().padStart(2, '0');
                    element.style.transform = 'translateY(0)';
                }, 250);
            }
        }
        
        // 登录表单提交
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const name = document.getElementById('name').value.trim();
            const password = document.getElementById('password').value.trim();
            
            // 验证姓名和密码
            if (name === '宋凯文' && password === '20050911') {
                // 登录成功，显示礼物页面
                loginPage.classList.add('opacity-0', 'translate-y-10');
                
                // 登录成功时添加小型烟花庆祝
                createFireworks(15);
                
                setTimeout(() => {
                    loginPage.classList.add('hidden');
                    giftPage.classList.remove('hidden');
                    setTimeout(() => {
                        giftPage.classList.add('opacity-100');
                    }, 50);
                }, 600);
            } else {
                // 登录失败，显示错误提示
                alert('姓名或密码不正确，请重试！');
            }
        });
        
        // 礼物选择
        giftBoxes.forEach(box => {
            box.addEventListener('click', function() {
                // 移除其他选中状态
                giftBoxes.forEach(b => b.classList.remove('selected'));
                
                // 添加当前选中状态
                this.classList.add('selected');
                
                // 记录选中的礼物
                selectedGift = this.getAttribute('data-gift');
                
                // 启用确认按钮
                confirmGiftBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                confirmGiftBtn.removeAttribute('disabled');
                
                // 添加点击特效
                createSmallConfetti(10, this);
            });
        });
        
        // 确认礼物选择
        confirmGiftBtn.addEventListener('click', function() {
            if (selectedGift) {
                // 显示庆祝特效
                createFireworks(40);
                createConfetti(150);
                
                // 延迟后显示贺卡页面
                setTimeout(() => {
                    giftPage.classList.add('opacity-0', 'translate-y-10');
                    setTimeout(() => {
                        giftPage.classList.add('hidden');
                        cardPage.classList.remove('hidden');
                        
                        // 显示选中的礼物
                        displaySelectedGift();
                        
                        setTimeout(() => {
                            cardPage.classList.add('opacity-100');
                            
                            // 在贺卡页面定时发射烟花
                            startCardFireworks();
                        }, 50);
                    }, 1500);
                }, 1000);
            }
        });
        
        // 重新开始（跳转到首页）
        restartBtn.addEventListener('click', function() {
            window.location.href = 'index.html';
        });
        
        // 显示选中的礼物
        function displaySelectedGift() {
            const giftNames = {
                'surprise': '惊喜礼物 - 一份神秘大礼，将在下次见面时亲手交给你',
                'game': '最新游戏一份 - 选择一款你心仪已久的最新游戏',
                'dinner': '大餐一顿 - 选择一家你喜欢的餐厅，享受美味大餐',
                'tech': '数码配件 - 挑选一款实用的数码配件，如无线耳机、智能手表等'
            };
            
            const giftIcons = {
                'surprise': '<i class="fa fa-gift text-secondary mr-2"></i>',
                'game': '<i class="fa fa-gamepad text-accent mr-2"></i>',
                'dinner': '<i class="fa fa-cutlery text-primary mr-2"></i>',
                'tech': '<i class="fa fa-headphones text-secondary mr-2"></i>'
            };
            
            selectedGiftDisplay.innerHTML = `${giftIcons[selectedGift]}${giftNames[selectedGift]}`;
        }
        
        // 创建烟花效果 - 增强版
        function createFireworks(count) {
            for (let i = 0; i < count; i++) {
                setTimeout(() => {
                    const firework = document.createElement('div');
                    firework.classList.add('firework');
                    
                    // 随机大小
                    const sizes = ['firework-small', 'firework-medium', 'firework-large'];
                    const randomSize = sizes[Math.floor(Math.random() * sizes.length)];
                    firework.classList.add(randomSize);
                    
                    // 根据大小设置不同的爆炸范围
                    if (randomSize === 'firework-small') {
                        firework.style.setProperty('--scale', '10');
                    } else if (randomSize === 'firework-medium') {
                        firework.style.setProperty('--scale', '15');
                    } else {
                        firework.style.setProperty('--scale', '20');
                    }
                    
                    // 随机位置和颜色
                    const x = Math.random() * 100;
                    const y = Math.random() * 60 + 20;
                    const hue = Math.random() * 360;
                    
                    firework.style.left = `${x}vw`;
                    firework.style.top = `${y}vh`;
                    firework.style.backgroundColor = `hsl(${hue}, 80%, 60%)`;
                    
                    // 随机添加光芒效果
                    if (Math.random() > 0.5) {
                        firework.style.boxShadow = `0 0 15px 5px hsl(${hue}, 80%, 60%, 0.7)`;
                    }
                    
                    document.body.appendChild(firework);
                    
                    // 移除烟花元素
                    setTimeout(() => {
                        firework.remove();
                    }, 1000);
                }, i * 100);
            }
        }
        
        // 创建小型彩带效果（用于礼物选择时）
        function createSmallConfetti(count, element) {
            const rect = element.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            
            for (let i = 0; i < count; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                
                // 随机属性
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 50 + 30;
                const x = centerX + Math.cos(angle) * distance;
                const y = centerY + Math.sin(angle) * distance;
                const hue = Math.random() * 360;
                const size = Math.random() * 6 + 4;
                const rotation = Math.random() * 360;
                const duration = Math.random() * 2 + 1;
                
                // 随机形状
                if (Math.random() > 0.5) {
                    confetti.style.borderRadius = '50%';
                }
                
                confetti.style.left = `${x}px`;
                confetti.style.top = `${y}px`;
                confetti.style.backgroundColor = `hsl(${hue}, 80%, 60%)`;
                confetti.style.width = `${size}px`;
                confetti.style.height = `${size}px`;
                confetti.style.transform = `rotate(${rotation}deg)`;
                confetti.style.animationDuration = `${duration}s`;
                
                document.body.appendChild(confetti);
                
                // 移除彩带元素
                setTimeout(() => {
                    confetti.remove();
                }, duration * 1000);
            }
        }
        
        // 创建彩带效果
        function createConfetti(count) {
            for (let i = 0; i < count; i++) {
                setTimeout(() => {
                    const confetti = document.createElement('div');
                    confetti.classList.add('confetti');
                    
                    // 随机属性
                    const x = Math.random() * 100;
                    const hue = Math.random() * 360;
                    const size = Math.random() * 8 + 4;
                    const rotation = Math.random() * 360;
                    const duration = Math.random() * 3 + 2;
                    
                    // 随机形状
                    if (Math.random() > 0.5) {
                        confetti.style.borderRadius = '50%';
                    }
                    
                    confetti.style.left = `${x}vw`;
                    confetti.style.backgroundColor = `hsl(${hue}, 80%, 60%)`;
                    confetti.style.width = `${size}px`;
                    confetti.style.height = `${size}px`;
                    confetti.style.transform = `rotate(${rotation}deg)`;
                    confetti.style.animationDuration = `${duration}s`;
                    
                    document.body.appendChild(confetti);
                    
                    // 移除彩带元素
                    setTimeout(() => {
                        confetti.remove();
                    }, duration * 1000);
                }, i * 50);
            }
        }
        
        // 在贺卡页面定时发射烟花
        function startCardFireworks() {
            // 初始发射一批烟花
            createFireworks(20);
            
            // 定时发射烟花
            fireworksInterval = setInterval(() => {
                createFireworks(8);
                createConfetti(30);
            }, 4000);
        }
        
        // 停止贺卡页面的烟花
        function stopCardFireworks() {
            if (fireworksInterval) {
                clearInterval(fireworksInterval);
                fireworksInterval = null;
            }
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            initCountdown();
        });
    </script>
</body>
</html>
    